<template>
	<div class="conMain">
		<cards-data :card-lists="tjlist" />
		<user :title="uTitle" :timeTitle="utimeTitle" :list='ulist' v-if="ureFresh" @change-time='changeTime'
			class="mt20" />

		<el-dialog @close="drawer=false" :visible.sync="drawer" :before-close="handleClose" width="800px"
			:modal-append-to-body="true" append-to-body :close-on-click-modal="false">
			<div style="padding: 20px;overflow-y: auto;height: 600px;">
				<div style="font-size: 23px;font-weight: bold;text-align: center;">{{ItemAll.title}}</div>
				<div style="text-align: center;margin-top: 20px;padding:0 50px;">{{ItemAll.description}}</div>
				<div v-html="ItemAll.content" class="html_text"></div>
				<div style="float: right;margin-top: 100px;">{{ItemAll.createtime}}</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import cardsData from "@/components/cards/index";
	import user from './components/user'
	import {
		stj,
		msgIndex,
		msgRead
	} from '@/api/user'


	export default {
		name: 'Home',
		components: {
			cardsData,
			user
		},
		data() {
			return {
				msgLength:'',
				ItemAll: '',
				ItemBody: '',
				ItemCurr:0,
				drawer: false,
				tjlist: [],
				uTitle: '订单数据',
				utimeTitle: '最近7天',
				ulist: [],
				ureFresh: false,
			}
		},
		watch: {
			ulist() {
				this.ureFresh = false
				this.$nextTick(() => {
					this.ureFresh = true
				})
			}
		},
		created() {
			let that = this
			that.getdata();
			msgIndex().then(res => {
				if (res.code == 1) {
					if (res.data.length > 0) {
						that.drawer = true
						that.msgLength=res.data.length
						that.ItemBody = res.data
						that.ItemAll=that.ItemBody[that.ItemCurr]
					}
				}
			})
		},
		mounted() {

		},
		methods: {
			handleClose() {
				this.drawer = false
				this.ItemAll=''
				this.ItemCurr++
				if(this.msgLength>=(this.ItemCurr+1)){
					this.ItemAll=this.ItemBody[this.ItemCurr]
					this.drawer = true
				}
			},
			changeTime(type, date, timeTitle) {

			},
			getdata() {
				stj().then(res => {
					this.tjlist = res.data.tjlist
					this.ulist = res.data.ulist
				})
			}

		}
	}
</script>
<style>
</style>